<template>
  <div class="container"> 
    <div class="play-warp"> 
            <div class="player-info" :style="{top:this.top+'%',opacity:this.opacity}"> 
                <div class="info">
                    <div class="name">{{this.musiclist[this.currentIndex].name}}</div>
                    <div class="singer-album">{{this.musiclist[this.currentIndex].singer}}</div>
                    <div class="music_progress">
                        <div class="music_progess_top">
                            <span class="current_time">{{ this.nowTime }}</span>
                            <span class="time">{{this.totalTime}}</span>
                         </div>
                         <div class="music_progress_bar">
                            <div class="music_progress_line" :style="{width:process+'%'}"></div>
                         </div>
                    </div>
                </div>
            </div>
    
            <div style="display: none;"> 
                <musicadio ref="musadio"></musicadio>
            </div>

            <div class="player-control">
                <div class="cover" :style="{animationPlayState:animationPlayState}" @click="gotomusic">
                    <img :src="this.musiclist[this.currentIndex].image" style="width: 100%;height: 100%; border-radius: 50%;">
                </div>
                <div class="control">
                    <div @click="preSon"> 
                        <i class="iconfont icon-zuobofang"></i>
                    </div>
                    <div @click="isBofang"> 
                        <i v-if="isplay" class="iconfont icon-24gl-pause" style="font-weight: 1000;"></i>
                        <i v-else class="iconfont icon-24gl-play" style="font-weight: 800;"></i>
                    </div>
                    <div @click="netSon">
                        <i class="iconfont icon-youbofang"></i>
                    </div>
                    <div @click="showlist">
                        <i class="iconfont icon-gengduo"></i>
                    </div>
                    <div @click="download">
                        <i class="iconfont icon-xiazai" style="font-weight: 800; font-size: 35px;"></i>
                    </div>
                    <div> 
                        <i class="iconfont icon-shengyin" style="font-weight: 800;"></i>
                        <input v-model="volume" type="range" id="volume" name="volume" min="0" max="100" step="1" />
                        <label for="volume">{{ this.volume }}</label>
                    </div>
                </div>
            </div>
        </div>
<!-- 播放列表 -->
        <div class="modal" :style="{display:DisPlay}">
            <div class="modal-box">
                <div class="modal-box-top">
                    <div class="modal-title">音乐列表</div>
                    <div class="model-close" @click="close">
                        <i class="iconfont icon-cuowuguanbiquxiao"></i>
                    </div>
                </div>

                <div class="modal-warpper">
                    <ul class="music-list">
                        <li v-for="(item,index) in musiclist" :key="index" @click="playmusic(item)">
                            <span>{{item.singer}} - {{ item.name }}</span>
                            <span class="iconfont icon-yinle1 playcir"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import musicadio from '@/components/musicAdio.vue'
import 'animate.css'
import { mapMutations,mapState} from 'vuex'
export default {
    components:{
        musicadio
    },
    data(){
        return{
            musiclist:[
                {
                    image: this.$baseUrl + '/files/images/SongImg/1696007111843_R-C (1).jpg',
                    introduction: "后阿里",
                    name: "后来",
                    singer: "蓝桥杯",
                    url: this.$baseUrl + '/files/Songs/1696007093170_五月天 - 后来的我们 (Life Live)(1).mp3'
                }
            ],
            currentIndex:0,
            isplay:false,
            animationPlayState:'paused',
            top:0,
            opacity:0,
            nowTime:'00:00',
            totalTime:'05:32',
            volume:10,
            process:0,
            DisPlay:'none'
        }
    },
    methods:{
        ...mapMutations('music',['getUrl','changeIsplay','getVolume','getmusic']),
        ...mapMutations('muslyric',['getmusicinfo','getLyric']),
        isBofang(){
            console.log(this.isplay)
            this.isplay = !this.isplay
            if(this.isplay){
                this.play()
            }
            else{
                this.stop()
            }
        },
        playmusic(val){
            this.getUrl(val.url)
            this.isplay = true
            this.changeIsplay(true)
        },
        play(){
            this.getUrl(this.musiclist[this.currentIndex].url)
            this.getmusicinfo(this.musiclist[this.currentIndex])
            this.getLyric(this.musiclist[this.currentIndex].lyric)
            this.changeIsplay(this.isplay)
            this.top = -100
            this.opacity = 1
            this.animationPlayState = 'running'
        },
        stop(){
            this.changeIsplay(this.isplay),
            this.top = 0
            this.opacity = 0
            this.animationPlayState = 'paused'
        },
        gotomusic(){
            this.$router.push('/layout/musiclyric')
        },
        preSon(){
            this.isplay = true
            if(this.currentIndex <= 0){
                this.currentIndex = this.musiclist.length-1
            }
            else{
                this.currentIndex = this.currentIndex-1
            }
            this.play()
        },

        showlist(){
            this.DisPlay = 'block'
        },
        close(){
            this.DisPlay = 'none'
        },
        netSon(){
            this.isplay = true
            if(this.currentIndex >=this.musiclist.length-1){
                this.currentIndex = 0
            }
            else{
                this.currentIndex = this.currentIndex+1
            }
            this.play()
        },

        download(){
            console.log(1)
        },
        formatTime(val){
            let Time =parseInt(val)
            let result = ''
            let h = parseInt(Time/3600)
            let m = parseInt(Time%3600/60)
            let s = Time%60
            if(h>0){
                if(h<10){
                    result = '0'+h +':'
                }
                else{
                    result = h+':'
                }
            }
            if(m<10){
                result = result+'0'+m+':'
            }
            else{
                result = result+m+':'
            }
            if(s<10){
                result = result+'0'+s
            }
            else{
                result = result+s
            }
            return result
        }
    },
    computed:{
        ...mapState('music',['Music','url','isPlay','MusicList','CurTime','duration','AutoNext'])
    },

    mounted(){

    },
    watch:{
        Music(){
            if(this.Music){
                this.musiclist.unshift(this.Music)
                this.currentIndex = 0
                this.isplay = true
                this.play()
            }
        },
        CurTime(){
            this.nowTime = this.formatTime(this.CurTime)
            this.totalTime = this.formatTime(this.duration)
            this.process = this.CurTime/this.duration*100
        },
        volume(){
            this.getVolume(this.volume/100)
        },
        AutoNext(){
            this.netSon()
        }
    },
    
    created(){
        console.log("----------------------")
        if(this.MusicList>0){
            this.musiclist = this.MusicList
        }
        console.log(this.MusicList)
    }
}
</script>

<style scoped lang="less">
      *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .play-warp{
            position: relative;
        }

        .play-warp .player-control{
            width: 100%;
            height: 80px;
            padding: 20px 200px 20px 50px;
            background-color:#fff;
            display: flex;
            justify-content: space-between;
            z-index: 10;
        }

        .player-control .cover{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #e1f5ca;
            margin-top: -60px;
            padding: 6px;
            position: relative;
            animation: zhuan 5s infinite linear;
            animation-play-state: paused;
        }

        .player-control .cover::before{
            content: "";
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            background-color: #fff;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        @keyframes zhuan{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }

        .player-control .control{
            width: 60%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .control i{
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 26px;
            color: #b3b0b0;
            cursor: pointer;
            transition: all 0.4s;
        }

        .control i:hover{
            border-radius: 6px;
            background-color: rgb(71,70,70,0.2);
            color: #fff;
        }

        .play-warp .player-info{
            width: 97%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top:-100%;
            z-index: -1;
            padding: 10px;
            background: rgba(255, 255, 255,0.64);
            box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
            backdrop-filter: blur(14px) saturate(188%);
            -webkit-backdrop-filter: blur(14px) saturate(188%);
            background-color: rgba(193,240,167,0.4);
            border-radius: 10px;
            border: 1px solid rgba(209, 213, 219, 0.3);
            display: flex;
            justify-content:space-around;
            transition: all 2s linear;
            opacity: 0;
        }

        .player-info .info{
            width: 60%;
            font-size: 10px;
        }

        .info .name{
            font-size: 14px;
            font-weight: bold;
        }

        .info .singer-album{
            color: #757474;
            line-height: 20px;
        }

        .info .music_progress{
            width: 100%;
        }

        .music_progress .music_progess_top{
            display: flex;
            justify-content: space-between;
            color: #f2709b;
            line-height: 20px;
        }

        .music_progress .music_progress_bar{
            width: 100%;
            height: 3px;
            background-color: #cccaca;
            border-radius: 10px;
            margin-top: 3px;
        }


        .music_progress .music_progress_line{
            height: 100%;
            background-color:#f27070;
        }


        
        .modal{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            top:0;
            left: 0;
            z-index: 99;
            display: none;
        }

        .modal .modal-box{
            width: 30%;
            height: 100%;
            padding: 20px;
            background-color: #fff;
            position: absolute;
            top: 40%;
            right: 0;
        }

        .modal-box .modal-box-top{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-box-top .model-close{
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.4s;
        }

        .modal-box .modal-warpper{
            width: 100%;
            height: calc(100%-40px);
            overflow-y: auto;
        }

        .music-list li{
            padding: 10px 0;
            border-bottom: 1px solid rgb(186,182,182);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .playcir{
            font-size: 20px;
            margin-right: 20px;
            transition: transform 0.4s;
            cursor: pointer;
        }
        .playcir:hover{
            transform: scale(1.2);
        }
        label {
            display: inline-block;
            font:1rem 'Fira Sans',sans-serif;
            width: 20px;
        }

        input {
         margin: 0.4rem;
        }
</style>